
import React, { useEffect, useRef, useState } from 'react';
import Taro, { FC, useRouter } from '@tarojs/taro';
import { View, Text, Image, Button, Textarea, ITouchEvent, ScrollView, CommonEventFunction } from '@tarojs/components';
import { AtFloatLayout, AtGrid, AtModal, AtModalAction, AtModalContent, AtModalHeader, AtNoticebar, AtTabs, AtTabsPane, AtTextarea } from 'taro-ui';
import { combineLatest, debounceTime, filter, firstValueFrom, interval, mergeMap, Subject, Subscription, switchMap, tap } from 'rxjs';

import { getLogger } from '@/utils/log';
import { HEARTBEAT_INTERVAL, LIVE_OPERATION, LIVE_TYPE, MUTE_STATUS, ROOMSTATS_TYPE, ROOM_ROLE, ROOM_STATUS } from '@/constants/room';
import { useAuthFacade } from '@/hooks/useAuthFacade';
import { useMsgFacade } from '@/hooks/useMsgFacade';
import Login from '@/components/loginPopup';
import { DeleteFileReq, EditRoomParams, UploadFileReq } from '@/models/request/roomReq';
import { useRoomUiFacade } from '@/hooks/useRoomUiFacade';
import { CMD } from '@/constants/message';
import { arePropsEqual, formatTime, formatTimeLite, isJSON, numFormat } from '@/utils';
import { TuwenText } from '@/models/request/msgReq';
import { uploadFile } from '@/utils/qcloudHelpers';
import { MessageItem } from '@/models/Message';
import { useTwEntityFacade } from '@/hooks/useTwEntityFacade';

import ChannelStyle from '@@/channel/channelStyle'
import "taro-ui/dist/style/components/float-layout.scss";
import "taro-ui/dist/style/components/grid.scss";
import "taro-ui/dist/style/components/modal.scss";
import "taro-ui/dist/style/components/noticebar.scss";
import { useRoomFacade } from './useRoomFacade';
import './index.scss';
import { arrayRemove } from '@datorama/akita';

//直播详情页
export const GraphicLive: FC = () => {
  const logger = getLogger("/pages/liveRoom/graphicLive");
  const router = useRouter();
  const roomId = router.params.roomId || "";

  //导入门面的所有元素作为页面绑定
  const [, roomRole, ownerId, anchorId, assistants, likes, tips, muteStatus] = useRoomFacade();
  const [authFacade, loginStatus, userId] = useAuthFacade();
  const [msgFacade, msgList, tuwenMsgList] = useMsgFacade();
  //图文消息entity门面
  const [twMsgFacade, pagination] = useTwEntityFacade(roomId);
  //设置本地合并变量
  const [mergeTwMsgList, setTuwenMsgList] = useState([] as MessageItem[]);
  //导入门面的所有元素作为页面绑定 
  const [
    roomFacade,
    roomName,
    ,
    anchorName,
    ownerName,
    ,
    ownerLogo,
    anchorLogo,
    orgId,
    ,
    orgName,
    orgLogo,
    tip,
    roomStatus,
    files,
    description,
    startTime,
    endTime,
    duration,
    visits,
    shares,
    ,
    ,
    picUrl
  ] = useRoomUiFacade();

  //具有管理权限的角色
  const admins = [ROOM_ROLE.ANCHOR, ROOM_ROLE.OWNER_ANCHOR, ROOM_ROLE.OWNER_ASSISTANT, ROOM_ROLE.ASSISTANT];
  const defaultTip = tips || `欢迎来到${ChannelStyle.appName}LIVE,请不要发布色情、违法、低俗、侵权等法律禁止的內容信息,健康参与。欢迎来${ChannelStyle.appName}LIVE,请不要发布色情、违法、低俗、侵权等法律禁止的內容信息,健康参与`

  //触发登录跳转的地址

  const isAdmin = (uid: string) => {
    const adminArr = assistants.map(assistant => {
      return assistant.userId;
    })
    adminArr.push(ownerId);

    if (anchorId) adminArr.push(anchorId);

    if (adminArr.includes(uid)) {
      return true;
    } else {
      return false;
    }
  }
  //消息数， 用于显示新消息logo
  const msgCountRef = useRef(mergeTwMsgList.length);
  const initSubject = () => new Subject<any>();
  const [emitter, setEmitter] = useState(initSubject);
  const innerAudioContextRef = useRef({} as Taro.InnerAudioContext); //创建语音实例
  const avatarImg = ASSETS_PATH + "/default_avator.png"
  const defaultImg = ASSETS_PATH + "/live_Blackground.png"
  const tabList = [{ title: '图文直播' }, { title: '互动' }, { title: '简介' }]
  const [inputVal, setInputVal] = useState(""); //图文直播输入框的值
  const [inputValue, setInputValue] = useState(""); //评论互动输入框的值
  const [keyboardHeight, setKeyboardHeight] = useState(0)
  const [showInput, setShowInput] = useState(false)//显示/隐藏输入文本框
  const [like, setLike] = useState(false) //点赞判断
  const [inputTipsVal, setInputTipsVal] = useState("");  //公告输入的值
  const [cur, setcur] = useState(0) //默认当前页面
  const [isOpenFile, setOpenFile] = useState(false); //文件上传弹框
  const [showDetele, setShowDetele] = useState(false)//删除文件提示
  const [filesIndex, setFilesIndex] = useState(0) // 文件索引值
  const [openSetting, setOpenSetting] = useState(false);   //主播设置弹框
  const [editTips, setEditTips] = useState(false)//修改公告提示框
  const [toView, setToView] = useState(''); //消息区域滚动位置 
  const [toMsg, setToMsg] = useState(''); //评论互动消息区域滚动位置 
  const [isStart, setIsStart] = useState(false); //开始直播弹窗提示 
  const [endLive, setEndLive] = useState(false)//结束直播提示  
  const [soundShow, setSoundShow] = useState(false) //录音隐藏、显示
  const [audioContext, setAudioContext] = useState('') //语音内容
  const [audioPaused, setAudioPaused] = useState(false) //是否自动播放语音
  const [autoStatus, setAutoStatus] = useState(false) //当前播放状态
  const [second, setSecond] = useState('') //语音时长
  const [audioId, setAudioId] = useState('') //语音唯一的id值
  const [cancelRecord, setCancelRecord] = useState(false) //是否取消发送语音
  const [move, setMove] = useState(0) //手指移动距离
  const [goUrl, setGoUrl] = useState('');
  const [touchBtn, setTouchBtn] = useState(false) //是否触摸按钮
  const [showContent, setShowContent] = useState(false)//是否显示踢出房间禁言按钮
  const [kickLive, setKickLive] = useState(false)//踢出房间提示
  const [idVal, setIdVal] = useState("");  //相对应的用户id
  const [forbiddenWd, setForbiddenWd] = useState(false)//禁言提示框
  const [hasSignIn, setHasSignIn] = useState(false); //签到显示
  const [getMore, setGetMore] = useState(false) //公告展开、收起
  const [isRemove, setIsRemove] = useState(false) //是否撤回提示框   
  const [messageBox, setMessageBox] = useState(false) //撤回消息框 
  const [tabScrollTop, setTabScrollTop] = useState(false) //消息到屏幕顶部的距离
  const msgSeqRef = useRef(0) //撤回消息的序列号 
  const msgTimeRef = useRef(0) //撤回消息的发送时间  
  const [forbiddenVal, setForbiddenVal] = useState({
    groupId: '',
    userId: '',
    muteTime: 0
  })//禁言接收的参数 

  const [status, setStatus] = useState(1)//成员状态，1是正常，2是禁言，3是已踢出
  const pageRef = useRef(1);  //翻页方向，1为向后翻，0为向前

  //仅用于直播中向前追加未观看记录，必须传入最早记录的sequence
  const prev_page = async () => {
    pageRef.current = 0;
    twMsgFacade.prevPage();
  }

  //仅用于直播中向后追加未观看记录
  const next_page = async () => {
    pageRef.current = 1;
    twMsgFacade.nextPage();
  }

  const handleClick = (value) => {
    setcur(value)
  }

  //设置弹框的数据
  const AtGridData = [
    {
      image: 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/edit1.png',
      value: '编辑房间'
    },
    {
      image: 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/share2.png',
      value: '允许分享'
    },
    {
      image: 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/setPwd1.png',
      value: '密码设置'
    },
    {
      image: 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/sigining1.png',
      value: '签到设置'
    },
    {
      image: 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/Team1.png',
      value: '团队管理',
    },
    {
      image: 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/comments1.png',
      value: '评论设置'
    },
    {
      image: 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/notice1.png',
      value: '修改公告'
    },
    {
      image: 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/ending.png',
      value: '结束直播'
    }
  ]

  //登录弹窗组件相关状态
  const [clicked, setClicked] = useState(false);

  //隐藏/显示主播设置弹框
  const setting = (e: ITouchEvent) => {
    e.stopPropagation();
    setOpenSetting(true)
  }

  //隐藏/显示公告提示框
  const setTipsShow = () => {
    setEditTips(!editTips)
  }

  //上滑到顶部
  const toUpper = (e) => {
    if (roomStatus === ROOM_STATUS.NOT_STARTED) {//直播未开始 
      return
    } else if (roomStatus === ROOM_STATUS.ENDED) { //直播已结束
    } else { //直播中 
      if (mergeTwMsgList && mergeTwMsgList.length > 0) {
        prev_page();
      }
    }
  }

  //下滑到底部
  const toLower = (e) => {
    if (roomStatus === ROOM_STATUS.NOT_STARTED) {//直播未开始 
      return
    } else if (roomStatus === ROOM_STATUS.ENDED) { //直播已结束
      next_page();
    } else { //直播中 
    }
  }

  // 转发直播间
  const shareRoom = () => {
    const nameParam = encodeURIComponent(roomName);
    const picParam = encodeURIComponent(picUrl);
    const timeParam = encodeURIComponent(formatTime(startTime));
    //TODO: 未开启分享时做何判断，图片是否为空，房间名称是否需要URIEncode
    // setGoUrl(`/pages/liveRoom/share/index?roomId=${roomId}&roomName=${nameParam}&picUrl=${picParam}&startTime=${timeParam}`);
    setGoUrl(`/subPages/liveRoom/share/index?roomId=${roomId}&roomName=${nameParam}&picUrl=${picParam}&startTime=${timeParam}`);
    setClicked(true);
  }

  //隐藏上传文件弹框
  const closeAllPop = (e: ITouchEvent) => {
    e.stopPropagation()
    setOpenFile(false);
  }

  //隐藏/显示上传文件弹框
  const openFileMenu = (e: ITouchEvent) => {
    e.stopPropagation()
    setOpenFile(true)
  }

  //隐藏/显示文件删除提示框
  const cancelDeteleFiles = (index) => {
    setShowDetele(!showDetele)
    setFilesIndex(index)
  }

  // 上传文件
  const clickUploadFile = () => {
    Taro.chooseMessageFile({
      count: 1,
      type: 'file',
      success(res) {
        uploadFile(res.tempFiles[0].path,
          (resUrl: string) => {
            const fileUrl = resUrl;
            const fileName = res.tempFiles[0].name;
            emitter.next({ roomId, fileName, fileUrl, action: "upload" });
          },
        )
      },
      fail(err) {
        console.log('文件上传失败:', err)
      }
    })
  }

  //打开文件查看
  const openFile = (fileUrl) => {
    Taro.downloadFile({
      url: fileUrl,
      success: function (res) {
        const filePath = res.tempFilePath
        Taro.openDocument({
          filePath: filePath,
          success: function () {
            console.log('打开文档成功')
          }
        })
      }
    })
  }

  //TODO 删除文件
  const deleteFile = (index) => {
    setShowDetele(!showDetele)
    const file = files[index];
    const fileId = file.id;
    emitter.next({ roomId, fileId, action: "delete" });
  }

  //隐藏开始直播提示框
  const handleCancel = () => {
    setIsStart(false)
  }

  //显示开始直播提示框
  const handleConfirm = () => {
    setIsStart(true)
  }

  //开始直播
  const startPush = () => {
    firstValueFrom(roomFacade.operateCamera(LIVE_OPERATION.START))
      .then(() => setIsStart(false))
      .catch(err => console.error)
  }

  //隐藏结束直播提示框
  const endHandleCancel = () => {
    setEndLive(false)
  }

  //结束直播直播
  const endPush = () => {
    firstValueFrom(roomFacade.operateCamera(LIVE_OPERATION.STOP))
      .then(() => {
        setEndLive(false)
      })
      .catch(err => console.error)
  }

  //展开更多
  const getmore = () => {
    setGetMore(true)
  }

  //收起公告
  const showUp = () => {
    setGetMore(false)
  }

  //显示录音按钮
  const getRecord = () => {
    setSoundShow(!soundShow)
  }

  //隐藏录音按钮
  const hideSound = () => {
    setSoundShow(false)
  }

  //修改公告
  const submit = () => {
    const params = {} as EditRoomParams;
    params.roomId = roomId;
    params.tips = inputTipsVal;
    firstValueFrom(roomFacade.editRoomTips(params))
    try {
      Taro.showToast({
        title: '修改成功',
        icon: 'none',
        duration: 2000
      });
      setEditTips(false)
    } catch (error) {
      logger.ERROR("保存信息失败！", error)
    }
  }

  //跳转页面
  const toTeam = (item, index: number) => {
    //阻止事件冒泡
    // event.stopPropagation(); 
    setClicked(true);

    if (item.value == '编辑房间') {
      setGoUrl('/subPages/liveRoom/editLive/index?roomId=' + roomId);
    }
    if (item.value == '允许分享') {
      setGoUrl('/subPages/liveRoom/allowShare/index?roomId=' + roomId);
    }
    if (item.value == '密码设置') {
      setGoUrl('/subPages/liveRoom/pwdSetting/index?roomId=' + roomId);
    }
    if (item.value == '签到设置') {
      setGoUrl(`/subPages/liveRoom/signInSetting/index?roomId=${roomId}&liveType= ${LIVE_TYPE.TEXT}`);
    }
    if (item.value == '团队管理') {
      setGoUrl('/subPages/liveRoom/TeamManagement/index?roomId=' + roomId);
    }
    if (item.value == '评论设置') {
      setGoUrl('/subPages/liveRoom/chatSettings/index');
    }
    if (item.value == '修改公告') {
      setEditTips(true)
      setOpenSetting(false)
    }
    if (item.value == '结束直播') {
      setEndLive(true)
      setOpenSetting(false)
    }
  }

  //跳转页面
  const toChatList = () => {
    Taro.navigateTo({
      url: '/subPages/liveRoom/chatList/index'
    })
  }

  //隐藏输入框
  const hideInput = () => {
    setClicked(true);
    //需要再登录成功后重新点击一次
    if (loginStatus === true) {
      if (roomStatus === ROOM_STATUS.NOT_STARTED) {
        Taro.showToast({
          title: ' 直播未开始',
          icon: 'none',
          duration: 3000
        })
      } else if (roomStatus === ROOM_STATUS.ENDED) {
        Taro.showToast({
          title: ' 直播已结束不能再输入',
          icon: 'none',
          duration: 3000
        })
      } else {
        setShowInput(!showInput)
      }
    }
  }

  //隐藏输入框
  const hideInput1 = () => {
    setClicked(true);
    //需要再登录成功后重新点击一次
    if (loginStatus === true) {
      if (roomStatus !== ROOM_STATUS.NOT_STARTED) {
        setShowInput(!showInput)
      } else {
        Taro.showToast({
          title: ' 直播未开始',
          icon: 'none',
          duration: 3000
        })
      }
    }
  }

  //获取公告输入的值
  const getInputTipsVal = (val: string) => {
    setInputTipsVal(val);
  }

  //图文直播主播端发送聊天信息
  const sendCustomMsg = () => {
    //TODO 字符串过滤
    const text = inputVal.replace(/(^\s*)|(\s*$)/g, "");
    if (text.length === 0) {
      Taro.showToast({
        title: '不能输入空文本...',
        icon: 'none',
        duration: 3000
      })
      return;
    }

    const data: TuwenText = {
      cmd: CMD.TUWEN_TEXT,
      text
    }

    msgFacade.sendRoomCustomMsg(data)
      .then((res: any) => {
        //发送成功后清空输入框 
        setInputVal("");
      })
  }

  //获取图文直播输入框的值
  const getInputVal = (e: any) => {
    const text = e.detail.value;
    setInputVal(text);
  }

  //互动评论发送聊天信息
  const sendRoomMsg = () => {
    //TODO 字符串过滤
    const msg = inputValue.replace(/(^\s*)|(\s*$)/g, "");

    if (msg.length === 0) {
      Taro.showToast({
        title: '不能输入空文本...',
        icon: 'none',
        duration: 3000
      })
      return;
    }

    msgFacade.sendRoomTextMsg(msg)
      .then((res: any) => {
        //发送成功后清空输入框
        setInputValue("");
      })
  }

  //获取评论互动输入框的值
  const getInputValue = (e: any) => {
    const text = e.detail.value;
    setInputValue(text);
  }

  //键盘弹起高度设置
  const getKeyboardHeight = (e) => {
    console.warn("触发键盘高度变化的渲染")
    setKeyboardHeight(e.mpEvent.detail.height)
  }

  const onKeyboardheightchange = (e) => {
    Taro.onKeyboardHeightChange(res => {
      setKeyboardHeight(res.height)
    })
  }

  //隐藏撤回消息提示框
  const cancelRemove = () => {
    setIsRemove(false)
    setMessageBox(false)
  }

  //显示撤回消息提示框
  const showRemove = () => {
    if (Math.round(Date.now() / 1000) - msgTimeRef.current > 120) {
      Taro.showToast({
        title: '消息已超过两分钟不可撤回',
        icon: 'none',
        duration: 3000
      })
      setMessageBox(false)
    } else {
      setIsRemove(true)
    }

  }

  //长按屏幕事件
  const longPressEvent = (sequence: number, time: number) => {
    setMessageBox(true);
    msgSeqRef.current = sequence;
    msgTimeRef.current = time; 
    console.log('时间的值：', Math.round(Date.now() / 1000), msgTimeRef.current)
  }

  //确认撤回图文消息
  const removeEvent = () => {
    setMessageBox(false);
    setIsRemove(false);

    firstValueFrom(twMsgFacade.revokeMessage({
      sequence: msgSeqRef.current,
      groupId: roomId
    }))
    // .then(res => reduceMergeTuwenList(msgSeqRef.current))
  }

  //隐藏踢出房间提示框
  const setKick = () => {
    setKickLive(false)
  }

  //显示踢出房间提示框
  const openModel = (value) => {
    if (status === 3) {
      Taro.showToast({
        title: '该用户已被踢出直播间',
        icon: 'none',
        duration: 3000
      })
    } else {
      setKickLive(true)
      setIdVal(() => value)
    }
  }

  //确认踢出房间
  const kickOut = () => {
    msgFacade.kickMember(idVal)
    setKickLive(false)
    setStatus(3);
  }

  //隐藏禁言提示框
  const setForbid = () => {
    setForbiddenWd(false)
  }

  //显示禁言提示框
  const openForbidModel = ({ value1, value2, value3 }) => {
    if (status === 2) {
      Taro.showToast({
        title: '该用户已经被禁言',
        icon: 'none',
        duration: 3000
      })
    } else if (status === 3) {
      Taro.showToast({
        title: '该用户已经被踢出房间',
        icon: 'none',
        duration: 3000
      })
    } else {
      setForbiddenWd(true)
      setForbiddenVal(() => ({ groupId: value1, userId: value2, muteTime: value3 }))
    }
  }

  //确认禁言用户
  const forbiddenUser = () => {
    msgFacade.muteGroupMember(forbiddenVal.groupId, forbiddenVal.userId, forbiddenVal.muteTime)
    setForbiddenWd(false)
  }

  //查询群成员的资料
  const getMemberVal = async (value1: string, value2: string[]) => {
    setShowContent(!showContent)
    try {
      const res = await msgFacade.getMemberInfo(value1, value2);
      const member = res.data.memberList[0];
      if (member.muteUntil > new Date().getTime() / 1000) {
        setStatus(2)
      }
    } catch (error) {
      console.error("获取数据出错:", error);
      setStatus(3);
    }
  }

  //发送图片信息
  const sendImages = () => {
    msgFacade.sendRoomImageMsg()
  }

  //开始录制音频信息
  const onTouchStart = (e) => {
    const X = e.touches[0].clientX
    setCancelRecord(false)
    setTouchBtn(true)
    setMove(X)
  }

  //结束录制音频信息
  const onTouchEnd = () => {
    msgFacade.endRoomAudioMsg()
    setTouchBtn(false)
  }

  const onTouchMove = (e) => {
    if (e.touches[0].clientX - move > 50) {
      // # 取消发送
      setCancelRecord(true)
      Taro.showToast({
        title: '松开，取消发送',
        icon: 'none',
        duration: 2000,
      })

    } else {
      // # 不取消  
      setCancelRecord(false)
      console.log('没有取消');
    }
  }

  //全屏预览聊天内容的图片
  const previewImage = (value: string) => {
    Taro.previewImage({
      current: value, // 当前显示图片的http链接
      urls: [value] // 需要预览的图片http链接列表
    })
  }

  // 播放语音
  const openAudio = (audio) => {
    const audioUrl = audio.remoteAudioUrl ? audio.remoteAudioUrl : audio.Url;
    const seconds = audio.second
    const auId = audio.uuid ? audio.uuid : audio.UUID
    //更改播放状态
    setAudioPaused(!audioPaused)
    if (audioPaused) {
      innerAudioContextRef.current.pause();
    } else {
      innerAudioContextRef.current.play()
    }
    setAudioContext(audioUrl)
    setSecond(seconds)
    setAudioId(auId)
    setAutoStatus(true)
  }

  //点赞操作
  const clickLike = () => {
    setLike(true)
    setTimeout(() => {
      setLike(false)
    }, 1000);

    const likeUserId = anchorId ? anchorId : ownerId; //被点赞的主播Id;
    firstValueFrom(roomFacade.saveRoomStat(roomId, ROOMSTATS_TYPE.LIKED));
    firstValueFrom(roomFacade.updateEtcData(roomId, { anchorId: likeUserId, likes: 5 }));
  }

  //签到操作
  const signIn = () => {
    // setGoUrl(`/pages/liveRoom/signIn/index?roomId=${roomId}&liveType= ${LIVE_TYPE.TEXT}`);
    setGoUrl(`/subPages/liveRoom/signIn/index?roomId=${roomId}&liveType= ${LIVE_TYPE.TEXT}`);
    setClicked(true);
  }

  //发送语音直播
  useEffect(() => {
    if (touchBtn === true) {
      msgFacade.sendRoomAudioMsg(cancelRecord)
    }
  }, [cancelRecord, touchBtn])

  //接收用户操作按钮等事件传入数据
  useEffect(() => {
    const subscriptions: Subscription[] = [
      emitter.asObservable()
        .pipe(
          switchMap(req => {
            if (req.action === "upload") {
              const params = {} as UploadFileReq;
              params.fileName = req.fileName;
              params.fileUrl = req.fileUrl;
              params.roomId = req.roomId;
              return roomFacade.uploadFile(params);
            } else {
              const params = {} as DeleteFileReq;
              params.roomId = req.roomId;
              params.fileId = req.fileId;
              return roomFacade.deleteFile(params);
            }
          }),
        )
        .subscribe({
          next: console.log,
          error: () => setEmitter(initSubject)
        }),
    ]
    return () => { subscriptions.map(sub => sub.unsubscribe()) };
  }, [emitter])

  //获取语音资源 
  useEffect(() => {
    const innerAudioContext = Taro.createInnerAudioContext();
    innerAudioContext.src = audioContext
    if (audioPaused == true) {
      innerAudioContext.play()
      innerAudioContext.onPlay(() => {
        console.log('开始播放')
        setAudioPaused(false)
      })
    }

    innerAudioContext.onEnded(() => {
      console.log('播放结束')
      setAutoStatus(false)
      innerAudioContext.destroy()
    })
    innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
    innerAudioContextRef.current = innerAudioContext
  }, [audioContext, audioPaused])

  //state状态处理总入口
  const onceEffects = () => {
    const subscriptions = [
      //如果在直播间触发了登录弹窗，则重新加群
      combineLatest([authFacade.loginStatus$, msgFacade.isSDKReady$])
        .pipe(
          debounceTime(500),
          //auth store刷新后才需要重新登录IM
          filter(([isLogin, isSDKReady]) => isLogin && isSDKReady),
          tap(() => { console.log("获取到的roomId:", roomId) }),
          //加群
          tap(() => msgFacade.applyJoinBigGroup(roomId)),
          //TODO: 减少请求 获取签到内容
          mergeMap(res => roomFacade.signInOptions$),
          tap(res => {
            if (res && res.length > 0) {
              //异步拉回来签到内容再开启签到按钮
              setHasSignIn(true);
            } else {
              setHasSignIn(false);
            }
          }),
          //switchMap(() => roomFacade.getInvites(roomId))
        )
        //重新登录后必须重新计算身份
        .subscribe(roomFacade.judgeRole),

      //处理系统群发通知
      roomFacade.handleGroupSystemNotify$
        .pipe(
          tap(msg => {
            //单独订阅通知时需要单独清理
            msgFacade.clearNotifyMsg();
            //不在上一个tap内运行是考虑store更新的异步延迟问题，在本周期内才能获取最新数据
            switch (msg.cmd) {
              case CMD.ADD_INVITE_ANCHOR:
              case CMD.ADD_ASSISTANT:
              case CMD.DEL_INVITE_ANCHOR:
              case CMD.DEL_ASSISTANT:
                {
                  roomFacade.judgeRole();
                  break;
                }
              case CMD.KICK_MEMBER:
                {
                  Taro.showToast({
                    title: '你已被踢出直播间',
                    icon: 'none',
                    duration: 2000
                  })
                  //C2C消息，只有被踢的人接收到，需要结合黑名单进行使用
                  setTimeout(() => {
                    Taro.switchTab({
                      url: `/pages/my/index/index`
                    })
                  }, 2000)
                  break;
                }
              case CMD.CHANGE_TIPS:
                {
                  const data = msg.data;
                  //插入新的群提示消息
                  msgFacade.insertTips(roomId, data.tips);
                  break;
                }
              case CMD.FORCE_SIGN_IN:
                {
                  //在房间收到签到通知，实时开启签到按钮
                  const data = msg.data;
                  if (data.hasSignInContent) {
                    setHasSignIn(true);
                  } else {
                    setHasSignIn(false);
                  }
                  break;
                }
              case CMD.REVOKE_TWMSG:
                {
                  //在房间收到主播撤回消息的通知
                  const sequence = msg.data.twMsgId;
                  msgFacade.revokeTuwenMsg(Number(sequence))
                  reduceMergeTuwenList(sequence);
                  break;
                }
              default:
                break;
            }
          })
        )
        .subscribe(),

      //心跳请求，未登录也可以返回数据
      interval(HEARTBEAT_INTERVAL)
        .pipe(
          switchMap(() => roomFacade.updateTS(roomId)),
        )
        .subscribe(),

      //聊天交互区
      msgFacade.msgList$
        .pipe(
          filter(list => list && list.length > 0),
          tap(list => {
            //自动滚动到最新
            setToMsg(`msg${list.length - 1}`);
          })
        )
        .subscribe(),
    ]

    return subscriptions;
  }

  //撤回消息以后更改数组的数据
  const reduceMergeTuwenList = (sequence: number) => { 
    setTuwenMsgList(msgArr => { 
      const arr = msgArr.filter((item) => { 
        return item.sequence != sequence
      }) 
      setTuwenMsgList(arr); 
      return arr ;
    });
  }

  //处理Observable的状态
  useEffect(() => {
    const subs = onceEffects();

    return () => { subs.map(sub => sub.unsubscribe()) };
  }, [])

  const scrollEffect = (list: MessageItem[]) => {
    //自动滚动到最后或者最前
    if (pageRef.current == 1) {
      setToView(`item${list.length - 1}`);
    } else {
      setToView(`item${0}`);
    }
  }

  //监听滚动状态
  useEffect(() => {
    if (mergeTwMsgList.length > 0) {
      scrollEffect(mergeTwMsgList);

    }
  }, [mergeTwMsgList])

  //合并现有数组以做渲染, true表示数组被合并到mergeTwMsgList前面，false则是后面
  const mergeEffect = (list1: MessageItem[], isHead: boolean) => {
    console.log('合并前的数据：', mergeTwMsgList)
    console.log('要合并的数据：', list1)

    const mergeArray = isHead ? [...list1, ...mergeTwMsgList] : [...mergeTwMsgList, ...list1];
    const objArry = {}
    //消息去重
    const mesgArray = mergeArray.reduce((item: MessageItem[], value) => {
      (objArry[value.sequence] ? null : objArry[value.sequence] = true) && item.push(value)
      return item
    }, [])
    setTuwenMsgList(mesgArray);
    console.log('合并后的数据：', mesgArray)
  }

  //合并新消息并去除重复
  useEffect(() => {
    console.log("图文store实时数据：", tuwenMsgList)
    if (roomStatus === ROOM_STATUS.STARTED) {
      mergeEffect(tuwenMsgList, false);
    }

  }, [tuwenMsgList, roomStatus])

  //合并翻页记录并去除重复
  useEffect(() => {
    //向后翻页，在列表尾部追加记录
    if (pagination.data && pagination.data.length > 0) {
      if (pageRef.current === 1 && roomStatus == ROOM_STATUS.ENDED) {
        //直播结束只能往后翻页
        mergeEffect(pagination.data, false);
      } else {
        //向前翻页，在列表头部追加记录  
        if (mergeTwMsgList.length == 0 && pagination.currentPage == 1 && (roomStatus == ROOM_STATUS.STARTED || roomStatus == ROOM_STATUS.PAUSED)) {
          twMsgFacade.lastPage();

          if (pagination.currentPage === pagination.lastPage) {
            mergeEffect(pagination.data, true);
          }
        } else {
          mergeEffect(pagination.data, true);
        }
      }
    }

  }, [pagination, roomStatus])

  //FIXME: 解决重复渲染的问题？
  const ItemNode: FC<{ item: MessageItem; index: number }> = ({ item, index }) => {
    if (isJSON(item && item.payload && (item.payload.data || item.payload.Data))) {
      const content = item.payload.data ? JSON.parse(item.payload.data) : JSON.parse(item.payload.Data);
      // console.log('图文消息遍历item的值：', item.sequence )
      return (
        <View className='msgText1' onLongPress={() => longPressEvent(item.sequence, item.time)}>{content.text}</View>
      )
    } else if (item && item.payload && (item.payload.imageFormat || item.payload.ImageFormat)) {
      let pic = ''
      if (item.from === userId && roomStatus === ROOM_STATUS.STARTED) {
        pic = item.payload.imageInfoArray[1].url;
      } else {
        pic = item.payload.imageInfoArray ? item.payload.imageInfoArray[1].imageUrl : item.payload.ImageInfoArray[1].URL;
      }
      return (
        <View className='msgImages' onClick={() => previewImage(pic)}>
          <Image mode='widthFix' src={pic} className='msgImg' onLongPress={() => longPressEvent(item.sequence, item.time)}></Image>
        </View>
      )
    } else if (item && item.payload && (item.payload.remoteAudioUrl || item.payload.Url)) {
      return (
        <View className='msgAudio' onClick={() => openAudio(item.payload)} onLongPress={() => longPressEvent(item.sequence, item.time)}>
          <Image src={(autoStatus == true && (audioId === item.payload.uuid || audioId === item.payload.UUID)) ? 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/listen.gif' : 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/signal.png'} className='signal-img'></Image>
          <View className='miao'>{item.payload.second}</View>
        </View>
      )
    } else {
      return (
        <View className='msgBox' key={index} id={'item' + index}>
          <View className='msg-column-item' >
          </View>
        </View>
      )
    }
  }

  const ListArea: FC<{ items: MessageItem[]; }> = ({ items }) => {
    return (
      <ScrollView className='contentMsg' scrollY scrollWithAnimation enhanced scrollIntoView={toView} onScrollToLower={toLower} onDragStart={toUpper}>
        {
          items.map((item, index) => {
            return (
              <View className='msgBox' key={index} id={'item' + index}>
                <View className='msg-column-item'>
                  <View className='nick'>主持人</View>
                  <ItemNode item={item} index={index} key={index}></ItemNode>
                  {
                    admins.includes(roomRole) && messageBox && item.sequence == msgSeqRef.current && (
                      <View className='remove1' onClick={showRemove}>
                        <Image className='removeIcon' src={require('../../../assets/remove.png')}></Image>
                        <Text className='removeText'>撤回</Text>
                      </View>
                    )
                  }
                </View>
              </View>
            )
          })
        }
      </ScrollView>
    )
  }

  const MsgArea = React.memo(ListArea, arePropsEqual);

  return (
    <View className='index' onClick={closeAllPop} >
      <View className='top'>
        <View className='top-left'>
          <Image src={defaultImg} className='logo'></Image>
        </View>
        <View className='top-right'>
          <View className='title'>{roomName}</View>
          <View className='bottom'>
            <View className='host'>主持人: {anchorName || ownerName}</View>
            <View className='status'>
              <Image src={(roomStatus == ROOM_STATUS.NOT_STARTED || roomStatus == ROOM_STATUS.ENDED) ? 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/numIcon.png' : 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/number1.png'} className='lcon-img'></Image>
              <View className='status1'>{roomStatus == ROOM_STATUS.NOT_STARTED ? '未开始' : roomStatus == ROOM_STATUS.ENDED ? '已结束' : '直播中'}</View>
            </View>
          </View>
        </View>
      </View>
      <AtTabs current={cur} tabList={tabList} onClick={handleClick.bind(this)}>
        {/* 图文直播 */}
        <AtTabsPane current={cur} index={0}>
          <View className='main'>
            {/* 消息显示区域 */}
            <MsgArea items={mergeTwMsgList}></MsgArea>
            {
              // roomStatus === ROOM_STATUS.ENDED && (
              //   <View className='ended'>
              //     <View className='liveEnded'>直播已结束</View>
              //     <View className='endTime'> 结束于 {formatTime(endTime)} </View>
              //   </View>
              // )
            }
            {/* 新消息提示 */}
            {/* {
              hasNewMsg && (
                <View className='newMsg' onClick={enableAutoScroll}>
                  <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/lower.svg' className='updown'></Image>
                  <View className='newText'>有新消息</View>
                </View>
              )
            } */}

            {
              roomStatus !== ROOM_STATUS.STARTED && (
                <View className='content'>
                  <View className='center-top'>
                    <View className='tip'> {roomStatus === ROOM_STATUS.NOT_STARTED ? '直播未开始' : ''} </View>
                    <View className='time'>{roomStatus === ROOM_STATUS.NOT_STARTED ? formatTime(startTime) + ' 开始' : ''} </View>
                  </View>
                  {
                    admins.includes(roomRole) && roomStatus === ROOM_STATUS.NOT_STARTED && (
                      <Button className='begin' onClick={handleConfirm}> 开始直播</Button>
                    )
                  }
                </View>
              )
            }
          </View>
        </AtTabsPane>
        {/* 互动 */}
        <AtTabsPane current={cur} index={1} >
          <View className='main2'>
            {
              !getMore && (
                <AtNoticebar marquee icon='volume-minus' showMore single onGotoMore={getmore}>{tips || defaultTip}</AtNoticebar>
              )
            }
            {
              !!getMore && (
                <AtNoticebar icon='volume-minus' >{tips || defaultTip}
                  <View className='up' onClick={showUp}>
                    <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/Pull-up.png' className='up_img'></Image>收起
                  </View>
                </AtNoticebar>
              )
            }

            <ScrollView className='msgListBox' scrollY scrollIntoView={toMsg} scrollWithAnimation >
              {
                msgList.map((msg, index) => {
                  return msg.from !== "administrator" && (
                    <View className='box1' key={String(index)} onClick={() => getMemberVal(msg.to, [msg.from])} id={'msg' + index}>
                      <View className='box1-left'>
                        <Image src={msg.avatar == '' ? avatarImg : msg.avatar} className='tx_img'></Image>
                      </View>
                      <View className='box1-right'>
                        <View className='top1'>
                          <View className='top1-left'>
                            <View className='name'> {msg.nick}</View>
                            <View className='role' style={{ display: isAdmin(msg.from) ? 'block' : 'none' }}>管理员</View>
                          </View>
                          <Text className='time'>{formatTimeLite(new Date(msg.time * 1000))}</Text>
                          {
                            //本消息发言人不属于创建人或主播，并且当前用户是管理员
                            (msg.from !== ownerId || (anchorId && msg.from !== anchorId)) && admins.includes(roomRole) && msg.from !== userId && (
                              <View className='show'><Image src={showContent ? 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/up.png' : 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/down.png'} className='show_img'></Image></View>
                            )
                          }
                        </View>
                        <View className='text'>
                          <Text className='msgText'>{!msg.isRevoked ? msg.payload.text : "消息已被撤回."}</Text>
                        </View>
                        <View className='butt'>
                          {
                            //本消息发言人不属于创建人或主播，并且当前用户是管理员
                            (msg.from !== ownerId || (anchorId && msg.from !== anchorId)) && admins.includes(roomRole) && msg.from !== userId && showContent && (
                              <View>
                                <Text className={status === 3 ? 'text3' : 'text2'} onClick={() => openModel(msg.from)}>踢出房间</Text>
                                <Text className={(status === 2 || status === 3) ? 'text3' : 'text2'} onClick={() => openForbidModel({ value1: msg.to, value2: msg.from, value3: 8 * 3600 })} >禁言</Text>
                              </View>
                            )
                          }
                        </View>
                      </View>
                    </View>
                  )
                }
                )
              }
            </ScrollView>
          </View>
        </AtTabsPane>
        {/* 简介 */}
        <AtTabsPane current={cur} index={2} >
          <View className='main3'>
            <View className='desc'>{description}</View>
            <View className='ct'>
              <View className='host'>主持人</View>
              <View className='hostVal'>{anchorName || ownerName}</View>
            </View>
            <View className='ct'>
              <View className='time'>直播时间</View>
              <View className='timeVal'>{formatTime(startTime)}</View>
            </View>
          </View>
        </AtTabsPane>
      </AtTabs>

      {/* 图文直播输入键盘 */}
      {
        cur == 0 && (
          <View className='foot'>
            <View className='ct-foot'>
              {
                admins.includes(roomRole) && (
                  <View className='foot-left'>
                    <View className='bt' >
                      <View className='input' onClick={hideInput}>这里发言..</View>
                    </View>
                  </View>
                )
              }

              <View className='foot-right' >
                {
                  admins.includes(roomRole) && (
                    <View className='setting1' onClick={setting}>
                      <Image src={ASSETS_PATH + '/my_setting.png'} className='setting_img' ></Image>
                      <View className='setText'>设置</View>
                    </View>
                  )
                }

                {/* 观众端观看页面 */}
                {
                  roomRole === ROOM_ROLE.AUDIENCE && hasSignIn && (
                    <View className='notic' onClick={signIn}>
                      <Image src={ASSETS_PATH + '/live_SignIn.png'} className='notic_img' ></Image>
                      <View className='noticText'>签到</View>
                    </View>
                  )
                }
                <View className='shareBt' onClick={shareRoom}>
                  <Image src={ASSETS_PATH + '/live_Share.png'} className='shareBt_img' ></Image>
                  <View className='shareBtText'>分享</View>
                </View>
                <View className='config' onClick={openFileMenu}>
                  <Image src={ASSETS_PATH + '/live_Text.png'} className='config_img' ></Image>
                  <View className='configText'>文件</View>
                </View>
                <View className='ider'>
                  <Image src={like ? 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/active.gif' : ASSETS_PATH + '/live_Likes.png'} className='ider_img' onClick={clickLike} ></Image>
                  <View className='inputBox'>
                    <View className='shuzi'>{likes}</View>
                  </View>
                </View>
              </View>
              {
                //键盘输入框
                showInput && (
                  <View className='inputMsg' style={{ 'bottom': keyboardHeight }}>
                    <View className='sound' onClick={getRecord}>
                      <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/mike.png' className='mike_img' ></Image>
                    </View>
                    <View className='input-box'>
                      <Textarea className='input-text'
                        maxlength={80}
                        cursorSpacing={90}
                        fixed
                        value={inputVal}
                        onInput={getInputVal}
                        showConfirmBar={false}
                        adjustPosition={false}
                        placeholder='发一条友善的评论吧...'
                        confirm-type='send'
                        onConfirm={sendCustomMsg}
                        onBlur={hideInput}
                        onFocus={getKeyboardHeight}
                        autoFocus
                        onKeyboardHeightChange={onKeyboardheightchange}
                      />
                    </View>
                    <View className='Image' onClick={sendImages}>
                      <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/picture.png' className='picture_img' ></Image>
                    </View>
                    <View className='send-bnt' onClick={sendCustomMsg}>发送</View>
                  </View>
                )}
            </View>

          </View>
        )
      }

      {/* 评论互动输入键盘 */}
      {
        cur == 1 && (
          <View className='foot1'>
            <View className='foot1Box'>
              <View className='foot1-left'>
                {
                  //主播端观看页面
                  admins.includes(roomRole) && (
                    <View className={muteStatus === 2 ? " bottom" : "bottom2"} >
                      <View className='input' onClick={hideInput1}>这里发言..</View>
                    </View>
                  )
                }

                {
                  //观众端观看页面
                  roomRole === ROOM_ROLE.AUDIENCE && (
                    <View className='bottom1'>
                      <View className='input1' onClick={hideInput1}>这里发言..</View>
                    </View>
                  )
                }

                {
                  //键盘输入框
                  showInput && (
                    <View className='inputMsg' style={{ 'bottom': keyboardHeight }}>
                      <View className='input-box'>
                        <Textarea className='input-text'
                          maxlength={80}
                          cursorSpacing={90}
                          fixed
                          value={inputValue}
                          onInput={getInputValue}
                          showConfirmBar={false}
                          adjustPosition={false}
                          placeholder='发一条友善的评论吧...'
                          confirm-type='send'
                          onConfirm={sendRoomMsg}
                          onBlur={hideInput1}
                          onFocus={getKeyboardHeight}
                          autoFocus
                          onKeyboardHeightChange={onKeyboardheightchange}
                        />
                      </View>
                      <View className='send-bnt' onClick={sendRoomMsg}>发送</View>
                    </View>
                  )}
              </View>

              {(roomRole === ROOM_ROLE.OWNER_ANCHOR || roomRole === ROOM_ROLE.ANCHOR) && (
                <View className='foot1-right' >
                  {
                    muteStatus === MUTE_STATUS.PENDING && (
                      <View className='partPass' onClick={toChatList}>
                        <Image src={ASSETS_PATH + '/batch_selection.png'} className='part_img' ></Image>
                        <View className='part'>批量放行</View>
                      </View>
                    )
                  }
                  <View className='shareBt' onClick={shareRoom}>
                    <Image src={ASSETS_PATH + '/live_Share.png'} className='shareBt_img' ></Image>
                    <View className='shareBtText'>分享</View>
                  </View>
                  <View className='ider'>
                    <Image src={like ? 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/active.gif' : ASSETS_PATH + '/live_Likes.png'} className='ider_img' onClick={clickLike} ></Image>
                    <View className='inputBox'>
                      <View className='shuzi'>{numFormat(likes)}</View>
                    </View>
                  </View>
                </View>
              )
              }

              {
                //观众端观看页面点赞
                roomRole === ROOM_ROLE.AUDIENCE && (
                  <View className='foot1-rightBox'>
                    <View className='rightBox'>
                      <View className='shareBt' onClick={shareRoom}>
                        <Image src={ASSETS_PATH + '/live_Share.png'} className='shareBt_img' ></Image>
                        <View className='shareBtText'>分享</View>
                      </View>
                      <View className='ider1'>
                        <Image src={like ? 'https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/active.gif' : ASSETS_PATH + '/live_Likes.png'} className='ider_img' onClick={clickLike} ></Image>
                        <View className='inputBox'>
                          <View className='shuzi'>{numFormat(likes)}</View>
                        </View>
                      </View>
                    </View>
                  </View>
                )
              }
            </View>
          </View>
        )
      }

      {/* 主播身份上传文件 竖屏*/}
      <AtFloatLayout isOpened={isOpenFile} className='setFile' >
        <View className='down'> <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/down1.png' className='down-img' onClick={() => setOpenFile(false)}></Image></View>
        {
          files.length > 0 && files.map((item, index) =>
            <View className='fileContent' key={String(index)}>
              <View className='file'> <Image src={ASSETS_PATH + '/live_Upload.png'} className='file-img'></Image></View>
              <View className='flieName' > {item.fileName}</View>
              {
                (roomRole === ROOM_ROLE.OWNER_ANCHOR || roomRole === ROOM_ROLE.ANCHOR) && (
                  <Button className='upload' onClick={() => openFile(item.fileUrl)}>查看文件</Button>
                )
              }
              {
                (roomRole === ROOM_ROLE.OWNER_ANCHOR || roomRole === ROOM_ROLE.ANCHOR) && (
                  <Button className='delete' onClick={() => cancelDeteleFiles(index)}>删除文件</Button>
                )
              }

              {
                roomRole === ROOM_ROLE.AUDIENCE && (
                  <Button className='upload' onClick={() => openFile(item.fileUrl)} >查看文件</Button>
                )
              }
            </View>
          )
        }
        {
          (roomRole === ROOM_ROLE.OWNER_ANCHOR || roomRole === ROOM_ROLE.ANCHOR) && (
            <Button className='uploadFile' onClick={clickUploadFile} style={{ display: files.length === 5 ? "none" : "block" }}>上传文件({files.length}/5)</Button>
          )
        }
      </AtFloatLayout >

      {/* 直播设置弹窗 */}
      <AtFloatLayout title='直播设置' isOpened={openSetting} onClose={() => setOpenSetting(false)} className='bottom-set' >
        <AtGrid hasBorder={false} columnNum={4} className='box2' onClick={toTeam} data={AtGridData} />
      </AtFloatLayout >

      {/* 未开始录音 */}
      {
        soundShow && (
          <View className='recorded'>
            <View className='off' onClick={hideSound}>取消</View>
            <View className='recorBox'>
              <View className='recor1'>
                {/* {
                  touchBtn == true && (
                    <View className='border'>
                      <View className='Seconds'>{second == '' ? '0' : second}</View>
                      <View className='total'>60''</View>
                    </View>
                  )
                } */}
                <View className='recording' onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} >
                  <View id='audio'><Image onTouchMove={onTouchMove} src={touchBtn == true ? ASSETS_PATH + '/speaking.gif' : ASSETS_PATH + '/audio_icon.png'} className='recording-img'></Image> </View>
                  <View className='speak1'>{touchBtn == true ? '松开发送' : '按住开始说话'}</View>
                </View>
                {
                  touchBtn == true && (
                    <Image src={ASSETS_PATH + '/trash_can.png'} className='Remove-img'></Image>
                  )
                }
              </View>
            </View>
          </View>
        )
      }

      {/*删除文件提示框  */}
      {
        showDetele && (
          <View className='modelBox'>
            <View className='tipsBox'>
              <View className='tipsContent'>确认删除该文件吗？</View>
              <View className='tipsButton'>
                <View className='cancelText' onClick={cancelDeteleFiles}>取消</View>
                <View className='confirmText ' onClick={() => deleteFile(filesIndex)}>确认</View>
              </View>
            </View>
          </View>
        )
      }

      {/* 修改公告弹窗 */}
      {
        editTips && (
          <AtModal isOpened={editTips}>
            <AtModalHeader>修改公告</AtModalHeader>
            <AtModalContent>
              <AtTextarea
                className='tipsInput'
                maxLength={50}
                value={inputTipsVal}
                onChange={getInputTipsVal}
                placeholder={`欢迎来到${ChannelStyle.appName}LIVE，请不要发布色情、违法、低俗、侵权等法律禁止的内容信息，健康参与。`}
              />
            </AtModalContent>
            <AtModalAction> <Button onClick={setTipsShow}>取消</Button> <Button onClick={submit} >确定</Button> </AtModalAction>
          </AtModal>
        )
      }

      {/* 开始直播弹窗 */}
      <AtModal
        isOpened={isStart}
        cancelText='取消'
        confirmText='确认'
        onClose={handleCancel}
        onCancel={handleCancel}
        onConfirm={startPush}
        content='确定要开始该直播吗？'
      />

      {/* 结束直播弹窗 */}
      <AtModal
        isOpened={endLive}
        cancelText='取消'
        confirmText='确认'
        onClose={endHandleCancel}
        onCancel={endHandleCancel}
        onConfirm={endPush}
        content='确定要结束该直播吗？'
      />

      {/* 主播踢出房间，禁言提示框 */}
      <AtModal
        className='model'
        isOpened={kickLive}
        cancelText='取消'
        confirmText='确认'
        onCancel={setKick}
        onConfirm={kickOut}
        content='确认要将该用户踢出直播间吗?'
      />

      {/* 主播禁言用户提示框 */}
      <AtModal
        className='model'
        isOpened={forbiddenWd}
        cancelText='取消'
        confirmText='确认'
        onCancel={setForbid}
        onConfirm={forbiddenUser}
        content='确认要将该用户禁言吗?'
      />

      {/* 主播撤回消息提示框 */}
      <AtModal
        className='model'
        isOpened={isRemove}
        cancelText='取消'
        confirmText='确认'
        onCancel={cancelRemove}
        onConfirm={removeEvent}
        content='确认要将消息撤回吗?'
      />

      <Login goUrl={goUrl} setGoUrl={setGoUrl} clicked={clicked} setClicked={setClicked} />
    </View >
  )
}

export default GraphicLive

